<template>
	<view class="rotor-detail-container">
		<!-- 图片区域 -->
		<view class="rotor-image-section">
			<u-image :src="rotorData.image || defaultImage" width="200rpx" height="200rpx" mode="aspectFit"></u-image>
		</view>
		
		<!-- 基本信息 -->
		<view class="rotor-info-section">
			<view class="form-item">
				<text class="form-label">转子型号</text>
				<text class="form-value">{{ rotorData.model || '无' }}</text>
			</view>
			
			<view class="form-item">
				<text class="form-label">品牌</text>
				<text class="form-value">{{ rotorData.brand || '无' }}</text>
			</view>
			
			<view class="form-item">
				<text class="form-label">规格</text>
				<text class="form-value">{{ rotorData.spec || '无' }}</text>
			</view>
			
			<view class="form-item">
				<text class="form-label">当前库存</text>
				<text class="form-value stock-value">{{ rotorData.stock || '0' }}</text>
			</view>
			
			<view class="form-item">
				<text class="form-label">价格</text>
				<text class="form-value price-value">¥{{ formatPrice(rotorData.price) }}</text>
			</view>
			
			<view class="form-item remark-item">
				<text class="form-label">备注</text>
				<text class="form-value">{{ rotorData.remark || '无' }}</text>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="footer-actions">
			<!-- <view class="btn-delete" hover-class="btn-delete-hover" @click="showDeleteConfirm">删除</view>
			<view class="btn-edit" hover-class="btn-edit-hover" @click="editRotor">编辑</view> -->
			<view class="btn-pay" hover-class="btn-pay-hover" @click="()=>showpay(statorData.price)">支付</view>
		</view>
		
		<!-- 删除确认弹窗 -->
		<u-modal :show="showDeleteModal" title="删除确认" content="确定要删除该转子吗？" showCancelButton @confirm="confirmDelete" @cancel="cancelDelete"></u-modal>
		
		<!-- 加载中提示 -->
		<u-loading-page :loading="pageLoading" color="#1989fa"></u-loading-page>
	</view>
</template>

<script>
	import api from '@/utils/api.js'
	
	export default {
		data() {
			return {
				rotorId: null, // 转子ID
				rotorData: {}, // 转子数据
				defaultImage: '/static/images/default-goods.png', // 默认图片
				showDeleteModal: false, // 删除确认弹窗
				pageLoading: true, // 页面加载状态
			};
		},
		onLoad(options) {
			console.log('转子详情页参数:', options);
			
			if (options && options.id) {
				this.rotorId = options.id;
				console.log('获取到转子ID:', this.rotorId);
				this.fetchRotorDetail();
			} else {
				console.error('缺少转子ID参数');
				uni.showToast({
					title: '缺少转子ID',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			// 支付
			showpay(){
				console.log(this.partsData?.price)
			},
			// 获取转子详情
			fetchRotorDetail() {
				if (!this.rotorId) {
					console.error('转子ID无效');
					uni.showToast({
						title: '转子ID无效',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
					return;
				}
				
				this.pageLoading = true;
				console.log('正在获取转子详情, ID:', this.rotorId);
				
				api.getShaftDetail(this.rotorId).then(res => {
					console.log('获取转子详情成功:', res);
					
					if (res && typeof res === 'object') {
						// 确保响应数据有id字段
						if (!res.id && this.rotorId) {
							res.id = this.rotorId;
						}
						
						this.rotorData = res;
						
						// 设置页面标题
						if (res.model) {
							uni.setNavigationBarTitle({
								title: res.model
							});
						}
					} else {
						console.error('转子详情数据异常:', res);
						uni.showToast({
							title: '转子不存在',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				}).catch(err => {
					console.error('获取转子详情失败:', err);
					uni.showToast({
						title: '获取转子详情失败',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}).finally(() => {
					this.pageLoading = false;
				});
			},
			
			// 格式化价格
			formatPrice(price) {
				if (price === undefined || price === null || price === '') return '0.00';
				const num = Number(price);
				return isNaN(num) ? '0.00' : num.toFixed(2);
			},
			
			// 编辑转子
			editRotor() {
				// 确保转子ID存在
				if (!this.rotorId) {
					uni.showToast({
						title: '转子ID不存在',
						icon: 'none'
					});
					return;
				}
				
				console.log('跳转编辑页面，ID:', this.rotorId);
				
				uni.navigateTo({
					url: `/pages/stator/rotor-edit?id=${this.rotorId}`,
					fail: (err) => {
						console.error('跳转到编辑页面失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 显示删除确认弹窗
			showDeleteConfirm() {
				this.showDeleteModal = true;
			},
			
			// 取消删除
			cancelDelete() {
				this.showDeleteModal = false;
			},
			
			// 确认删除
			confirmDelete() {
				this.showDeleteModal = false;
				
				if (!this.rotorId) {
					uni.showToast({
						title: '转子ID不存在',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '删除中...',
					mask: true
				});
				
				console.log('开始删除转子，ID:', this.rotorId);
				
				// 调用删除API
				api.deleteShaft(this.rotorId).then(res => {
					console.log('删除转子成功:', res);
					
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
					
					setTimeout(() => {
						// 返回列表页面并刷新
						uni.navigateBack({
							delta: 1,
							success: () => {
								// 通过事件通知列表页刷新数据
								uni.$emit('refreshRotorList');
							}
						});
					}, 1500);
				}).catch(err => {
					console.error('删除转子失败:', err);
					uni.showToast({
						title: err?.message || '删除失败，请重试',
						icon: 'none'
					});
				}).finally(() => {
					uni.hideLoading();
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
page {
    background-color: #f5f7fa;
}

.rotor-detail-container {
    min-height: 100vh;
    background-color: #f5f7fa;
    padding-top: 20rpx;
    padding-bottom: 120rpx;
    position: relative;
}

// 图片区域
.rotor-image-section {
    display: flex;
    justify-content: center;
    padding: 30rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
}

// 转子信息区域
.rotor-info-section {
    background-color: #fff;
}

// 表单项样式
.form-item {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    min-height: 80rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #f0f0f0;
    
    .form-label {
        color: #999;
        font-size: 28rpx;
        width: 150rpx;
    }
    
    .form-value {
        font-size: 28rpx;
        color: #333;
        flex: 1;
        
        &.price-value {
            color: #fa3534;
            font-weight: 500;
        }
        
        &.stock-value {
            color: #1989fa;
            font-weight: 500;
        }
    }
    
    &.remark-item {
        align-items: flex-start;
        padding-top: 20rpx;
        padding-bottom: 20rpx;
    }
}

// 底部按钮
.footer-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    height: 100rpx;
    
    .btn-delete {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        color: #ff4d4f;
        font-size: 30rpx;
        border-top: 1rpx solid #eee;
        
        &-hover {
            background-color: #f5f5f5;
        }
    }
	.btn-pay{
		flex: 1;
		text-align: center;
		padding: 10rpx 0;
		background-color: rgb(231, 66, 66);
		color: white;
	}
    
    .btn-edit {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #1989fa;
        color: #fff;
        font-size: 30rpx;
        
        &-hover {
            background-color: #0c76d8;
            opacity: 0.9;
        }
    }
}
</style> 